import './CateDetail.css'
import React, { useEffect, useState } from 'react';
import TopBar from '../TopBar/TopBar';
import { choose, result,next } from '../../assets/api/cate';
import { message } from 'antd';

export default function CateDetail(props) {
    const [chooseindex, setchooseindex] = useState(-1);//小分类类型下标
    const [choosedetailindex, setchoosedetailindex] = useState(-1);//小分类当前下标
    const [payindex, setpayindex] = useState(0);
    const [hotindex, sethotindex] = useState(0);
    const [wordsindex, setwordsindex] = useState(0);
    const [catId, setcatId] = useState(0);
    const [choosedetail, setchoosedetail] = useState([]);
    const [loading, setLoading] = useState(true);
    const [list, setlist] = useState([]);
    const [nextlist, setnextlist] = useState("");
    useEffect(() => {
      if(props.bottom===0){
          loadmore();
      }
    }, [props.bottom]);
    
    useEffect(() => {
        if (props.catelist.length === 0) {
            return;
        }
        message.loading(
            {
                key: 1,
                content: <span>加载中</span>,
                className: "toast",
                duration: 0,
            }
        )
        choose(props.catelist[props.catedetailindex].cates[0].url).then(data => {
            setchoosedetail(data.categories);
            console.log("choosedetail===>", choosedetail);
        })
        console.log(props.titleindex);
        changetitle(props.titleindex);
    }, [props.title]);
    function loadmore(){
        if(loading){
            return;
        }
        setLoading(true);
        message.loading(
            {
                key: 1,
                content: <span>加载中</span>,
                className: "toast",
                duration: 0,
            }
        )
       next(nextlist).then(data=>{
           console.log(data);
           list.push(...data.list);
           setlist(list);
           setnextlist(data.next);
           message.destroy(1);
           setLoading(false);

       })
    }


    function changetitle(index) {
        message.loading(
            {
                key: 1,
                content: <span>加载中</span>,
                className: "toast",
                duration: 0,
            }
        )
        setchooseindex(-1);
        setpayindex(0);
        setwordsindex(0);
        sethotindex(0);
        props.settitleindex(index);
        choose(props.catelist[props.catedetailindex].cates[index].url).then(data => {
            setcatId(props.catelist[props.catedetailindex].cates[index].url.split("=")[1]);
            setchoosedetail(data.categories);
            result({ catId: props.catelist[props.catedetailindex].cates[index].url.split("=")[1], pay: 0, wordCount: 0, sort: 1, page: 1 }).then(res => {
                console.log(res);
                setlist(res.list);
                setnextlist(res.next);
                message.destroy(1);
                setLoading(false);
            })
            console.log(data);
        })

    }
    function changechoose(index) {
        if (chooseindex === index) {
            setchooseindex(-1);
            return;
        }

        setchooseindex(index);
    }
    function changechoosedetail(index, type) {
        message.loading(
            {
                key: 1,
                content: <span>加载中</span>,
                className: "toast",
                duration: 0,
            }
        )
        let newpayindex = payindex, newwordindex = wordsindex, newhotindex = hotindex
        setchoosedetailindex(index);
        if (type === "words") {
            setwordsindex(index);
            newwordindex = index
        } else if (type === "pay") {
            setpayindex(index);
            newpayindex = index;
        } else {
            sethotindex(index);
            newhotindex = index;
        }
        setchoosedetailindex(-1);
        setchooseindex(-1);
        let newpage = 1;
        if (props.title === "精品书籍") {
            console.log(newpayindex, newwordindex, newhotindex, choosedetail[0].catArray[newwordindex].value);
            result({ catId, pay: newpayindex, subCat: choosedetail[0].catArray[newwordindex].value, sort: newhotindex === 0 ? 1 : 3, page: newpage }).then(data => {
                console.log(catId);
                console.log(data);
                setlist(data.list);
                setnextlist(data.next);
                message.destroy(1)
                setLoading(false);
            })
        } else {
            result({ catId, pay: payindex, wordCount: wordsindex, sort: hotindex === 0 ? 1 : 3, page: newpage }).then(data => {
                console.log(data);
                setlist(data.list);
                setnextlist(data.next);
                message.destroy(1)
                setLoading(false);
            })
        }

    }
    return (
        <div className={'catedetailbox ' + (props.show ? "show" : "")}>
            <TopBar title={props.title} back={props.hidecatedetail} />
            {

                props.title === "精品书籍" ? <div className="blankbox"></div> : props.title === "男生小说" ? <div className="boyblankbox"></div> : <div className="girlblankbox"></div>
            }
            <div className="catedetaitop">
                <div className="catedetaillist">

                    {
                        props.catelist[props.catedetailindex] ?
                            props.catelist[props.catedetailindex].cates.map((ele, index) => (
                                <div key={index} className={"catelisttitle " + (index === props.titleindex ? "con" : "")} onClick={() => changetitle(index)}>{ele.name}</div>
                            )) : <></>
                    }
                </div>
                <div className="choosebox">
                    {
                        props.title !== "精品书籍" ? (<> <div onClick={() => changechoose(0)} className={"fontnumber " + (chooseindex === 0 ? "con" : "")}>字数<i className='iconfont icon-xia'></i></div>
                            <div onClick={() => changechoose(1)} className={"pay " + (chooseindex === 1 ? "con" : "")}>付费类型<i className='iconfont icon-xia'></i></div>
                            <div onClick={() => changechoose(2)} className={"hot " + (chooseindex === 2 ? "con" : "")}>热度<i className='iconfont icon-xia'></i></div>
                        </>) : (<>
                            <div onClick={() => changechoose(0)} className={"fontnumber " + (chooseindex === 0 ? "con" : "")}>图书类型<i className='iconfont icon-xia'></i></div>
                            <div onClick={() => changechoose(1)} className={"pay " + (chooseindex === 1 ? "con" : "")}>付费类型<i className='iconfont icon-xia'></i></div>
                            <div onClick={() => changechoose(2)} className={"hot " + (chooseindex === 2 ? "con" : "")}>热度<i className='iconfont icon-xia'></i></div></>)
                    }

                </div>
                <div className={"choosedetail " + (chooseindex !== -1 ? "show" : "")}>
                    {
                        props.title !== "精品书籍" ? (chooseindex === 0 ?
                            <>
                                <div className={"choosedetailminbox " + (wordsindex === 0 ? "con" : "")} onClick={() => changechoosedetail(0, "words")}>全部</div>
                                <div className={"choosedetailminbox " + (wordsindex === 1 ? "con" : "")} onClick={() => changechoosedetail(1, "words")}>30万字以下</div>
                                <div className={"choosedetailminbox " + (wordsindex === 2 ? "con" : "")} onClick={() => changechoosedetail(2, "words")}>30-50万字</div>
                                <div className={"choosedetailminbox " + (wordsindex === 3 ? "con" : "")} onClick={() => changechoosedetail(3, "words")}>50-100万字</div>
                                <div className={"choosedetailminbox " + (wordsindex === 4 ? "con" : "")} onClick={() => changechoosedetail(4, "words")}>100万字以上</div>
                            </> : chooseindex === 1 ?
                                <>
                                    <div className={"choosedetailminbox " + (payindex === 0 ? "con" : "")} onClick={() => changechoosedetail(0, "pay")}>全部</div>
                                    <div className={"choosedetailminbox " + (payindex === 1 ? "con" : "")} onClick={() => changechoosedetail(1, "pay")}>收费</div>
                                    <div className={"choosedetailminbox " + (payindex === 2 ? "con" : "")} onClick={() => changechoosedetail(2, "pay")}>免费</div>
                                    <div className={"choosedetailminbox " + (payindex === 3 ? "con" : "")} onClick={() => changechoosedetail(3, "pay")}>包月</div>

                                </> : <>
                                    <div className={"choosedetailminbox " + (hotindex === 0 ? "con" : "")} onClick={() => changechoosedetail(0, "hot")}>畅销</div>
                                    <div className={"choosedetailminbox " + (hotindex === 1 ? "con" : "")} onClick={() => changechoosedetail(1, "hot")}>最新</div>
                                </>) : (choosedetail.length !== 0 ? (chooseindex === 0 ? choosedetail[0].catArray.map((ele, index) => (
                                    <div key={index} className={"choosedetailminbox " + (wordsindex === index ? "con" : "")} onClick={() => changechoosedetail(index, "words")}>{ele.name}</div>
                                )) : chooseindex === 1 ? choosedetail[1].catArray.map((ele, index) => (
                                    <div key={index} className={"choosedetailminbox " + (payindex === index ? "con" : "")} onClick={() => changechoosedetail(index, "pay")}>{ele.name}</div>
                                )) : choosedetail[2].catArray.map((ele, index) => (
                                    <div key={index} className={"choosedetailminbox " + (hotindex === index ? "con" : "")} onClick={() => changechoosedetail(index, "hot")}>{ele.name}</div>
                                ))) : <></>)
                    }
                </div>
            </div>
            <div onClick={() => changechoose(-1)} className={"catedetailbg " + (chooseindex != -1 ? "show" : "")}></div>
            <div className="resultbook">
                {
                    list.map((ele, index) => (
                        
                        <div className="resultminbox" key={index} onClick={()=>props.changebooksid(ele.sourceUuid)}>
                            <div className="face">
                                <img src={ele.cover} alt="" />
                            </div>
                            <div className="minboxcontent" key={index}>
                                <div className="contenttitle">{ele.title}</div>
                                <div className="contenauthor">{ele.author}</div>
                            </div>
                        </div>
                    ))
                }
            </div>
        </div>
    );
}
